<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		.xian {
			width: 360px;
			height: 600px;
			margin: 0 auto;
			position: relative;
			border: 1px solid rgb(122, 130, 243);
		}

		.fx {
			display: flex;
			justify-content: center;
			margin: 0 0 0 0;
		}

		.fx div {
			margin: 2px;
		}

		.fx div:nth-child(1) {
			border-right: 50px solid rgb(122, 130, 243);
			border-left: 0;
			border-top: 30px solid transparent;
			border-bottom: 30px solid transparent;
		}

		.fx div:nth-child(2) {
			border-left: 50px solid rgb(122, 130, 243);
			border-right: 0;
			border-top: 30px solid transparent;
			border-bottom: 30px solid transparent;
		}

		.fx div:nth-child(3) {
			border-top: 50px solid rgb(122, 130, 243);
			border-bottom: 0;
			border-left: 30px solid transparent;
			border-right: 30px solid transparent;
		}

		.fx div:nth-child(4) {
			width: 30px;
			height: 30px;
			border: 15px solid rgb(122, 130, 243);
			border-left: 15px solid transparent;
			border-radius: 50%;
			position: relative;
		}

		.fx div:nth-child(4)::before {
			content: '';
			position: absolute;
			top: -5px;
			left: -25px;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-bottom: 20px solid rgb(122, 130, 243);
			transform: rotate(-140deg);
		}

		.fx div:nth-child(5) {
			width: 30px;
			height: 30px;
			border: 15px solid rgb(122, 130, 243);
			border-right: 15px solid transparent;
			border-radius: 50%;
			position: relative;
		}

		.fx div:nth-child(5)::before {
			content: '';
			position: absolute;
			top: -3px;
			left: 16px;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-bottom: 20px solid rgb(122, 130, 243);
			transform: rotate(140deg);
		}

		.fx div:nth-child(6) {
			width: 60px;
			height: 60px;
			background-color: rgb(122, 130, 243);
			position: relative;
		}

		.ti-shi {
			display: flex;
			justify-content: center;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class='xian'>
	</div>
	<div class='fx'>
		<div onclick='zuo()'></div>
		<div onclick='you()'></div>
		<div onclick='dd(m)'></div>
		<div onclick='zn()'></div>
		<div onclick='zs()'></div>
		<div onclick='ting(ti)'></div>
	</div>
	<div class="ti-shi">
		a、d 旋转；<br />
		方向键， 上：暂停 ，下：加速<br />
		左、右：移动
	</div>
	<script>
		let x = document.querySelector('.xian');

		function tn(st) {
			return +st.slice(0, -2)
		}
		let m = true;
		let kk;
		let ti = true;
		let shuzu = [
			[{
				l: 160,
				t: 0
			}, {
				l1: 170,
				t1: 0
			}, {
				l2: 180,
				t2: 0
			}, {
				l3: 190,
				t3: 0
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 170,
				t1: 10
			}, {
				l2: 170,
				t2: 20
			}, {
				l3: 170,
				t3: 30
			}],
			[{
				l: 170,
				t: 10
			}, {
				l1: 180,
				t1: 10
			}, {
				l2: 190,
				t2: 10
			}, {
				l3: 190,
				t3: 0
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 170,
				t1: 10
			}, {
				l2: 170,
				t2: 20
			}, {
				l3: 180,
				t3: 20
			}],
			[{
				l: 170,
				t: 10
			}, {
				l1: 180,
				t1: 0
			}, {
				l2: 170,
				t2: 0
			}, {
				l3: 190,
				t3: 0
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 180,
				t1: 10
			}, {
				l2: 180,
				t2: 0
			}, {
				l3: 180,
				t3: 20
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 180,
				t1: 10
			}, {
				l2: 170,
				t2: 10
			}, {
				l3: 190,
				t3: 10
			}],
			[{
				l: 180,
				t: 0
			}, {
				l1: 170,
				t1: 10
			}, {
				l2: 170,
				t2: 0
			}, {
				l3: 170,
				t3: 20
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 180,
				t1: 0
			}, {
				l2: 190,
				t2: 0
			}, {
				l3: 190,
				t3: 10
			}],
			[{
				l: 170,
				t: 20
			}, {
				l1: 180,
				t1: 0
			}, {
				l2: 180,
				t2: 20
			}, {
				l3: 180,
				t3: 10
			}],
			[{
				l: 170,
				t: 10
			}, {
				l1: 180,
				t1: 0
			}, {
				l2: 180,
				t2: 10
			}, {
				l3: 190,
				t3: 10
			}],
			[{
				l: 180,
				t: 0
			}, {
				l1: 180,
				t1: 20
			}, {
				l2: 180,
				t2: 10
			}, {
				l3: 190,
				t3: 10
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 190,
				t1: 0
			}, {
				l2: 180,
				t2: 0
			}, {
				l3: 180,
				t3: 10
			}],
			[{
				l: 170,
				t: 10
			}, {
				l1: 180,
				t1: 0
			}, {
				l2: 180,
				t2: 10
			}, {
				l3: 180,
				t3: 20
			}],
			[{
				l: 170,
				t: 10
			}, {
				l1: 170,
				t1: 20
			}, {
				l2: 180,
				t2: 10
			}, {
				l3: 180,
				t3: 0
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 180,
				t1: 0
			}, {
				l2: 180,
				t2: 10
			}, {
				l3: 190,
				t3: 10
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 170,
				t1: 10
			}, {
				l2: 180,
				t2: 10
			}, {
				l3: 180,
				t3: 20
			}],
			[{
				l: 170,
				t: 10
			}, {
				l1: 180,
				t1: 10
			}, {
				l2: 180,
				t2: 0
			}, {
				l3: 190,
				t3: 0
			}],
			[{
				l: 170,
				t: 0
			}, {
				l1: 180,
				t1: 0
			}, {
				l2: 180,
				t2: 10
			}, {
				l3: 170,
				t3: 10
			}]
		];
		let sto = document.createEvent('HTMLEvents');
		sto.initEvent("stop", false, false);
		class e {
			constructor(l, t) {
				this.a = document.createElement('div');
				this.a.style =
					`width:8px;height:8px;border:1px solid rgb(122, 130, 243);background:black;position:absolute;left:${l}px;top:${t}px`;
				this.a.live = true;
				x.appendChild(this.a);
			}
			shan() {
				x.removeChild(this.a);
			}
		}

		class k {
			constructor([{
				l,
				t
			}, {
				l1,
				t1
			}, {
				l2,
				t2
			}, {
				l3,
				t3
			}]) {
				this.st = true;
				this.ab = new e(l, t);
				this.ab1 = new e(l1, t1);
				this.ab2 = new e(l2, t2);
				this.ab3 = new e(l3, t3);
				this.ss = [this.ab, this.ab1, this.ab2, this.ab3];
			}
			panduan(t) {
				this.s = setInterval(() => {
					this.ss.forEach(xx => {
						xx.b = xx.a.offsetTop + 10;
						if (xx.b > 590) {
							this.st = false;
						}
						let y = x.querySelectorAll('div');

						y.forEach(z => {
							if ((!z.live) && xx.a.offsetLeft == z.offsetLeft) {
								if (xx.b == z.offsetTop) {
									this.st = false;
								}
							}
						})
					})
					if (this.st) {
						this.ss.forEach(xy => {
							xy.a.style.top = xy.b + 'px'
						})
					}
					if (!this.st) {
						this.stop();
						this.ss.forEach(aa => {
							aa.a.live = false
						})
					}
				}, t);
			}
			run() {
				this.panduan(500)
			}
			runs() {
				clearInterval(this.s)
				this.panduan(50)
			}
			stop() {
				let y = x.querySelectorAll('div');
				clearInterval(this.s);
				this.ss.forEach(x => {
					let s = [];

					y.forEach(q => {
						if (q.offsetTop == x.a.offsetTop) {
							s.push(q)
						}
					})
					let xt = x.a.offsetTop;
					if (s.length == 36) {
						s.forEach(w => w.remove());
						y.forEach(t => {

							if (t.offsetTop < xt) {
								t.style.top = t.offsetTop + 10 + 'px'
							}

						})
					}

				});
				x.dispatchEvent(sto)
			}
			zhuann() {
				let y = x.querySelectorAll('div');
				let zh = true;
				this.ss.forEach(x => {
					x.b = this.ab2.a.offsetLeft + x.a.offsetTop - this.ab2.a.offsetTop;
					x.c = this.ab2.a.offsetTop - x.a.offsetLeft + this.ab2.a.offsetLeft;
					y.forEach(z => {
						if (((!z.live) && x.c == z.offsetTop && x.b == z.offsetLeft) || x.b < 0 || x.b >
							350 || x.c > 590) {
							zh = false;
						}
					})
				})
				if (zh) {
					kk.ss.forEach(x => {
						x.a.style.left = x.b + 'px';
						x.a.style.top = x.c + 'px'
					})
				}
			}
			zhuans() {
				let y = x.querySelectorAll('div');
				let zh = true;
				this.ss.forEach(x => {
					x.b = this.ab2.a.offsetLeft - x.a.offsetTop + this.ab2.a.offsetTop;
					x.c = x.a.offsetLeft - this.ab2.a.offsetLeft + this.ab2.a.offsetTop;
					y.forEach(z => {
						if (((!z.live) && x.c == z.offsetTop && x.b == z.offsetLeft) || x.b < 0 || x.b >
							350 || x.c > 590) {
							zh = false;
						}
					})
				})
				if (zh) {
					kk.ss.forEach(x => {
						x.a.style.left = x.b + 'px';
						x.a.style.top = x.c + 'px'
					})
				}
			}

		}

		function zuo() {
			let y = x.querySelectorAll('div');
			let zh = true;
			kk.ss.forEach(x => {
				x.b = x.a.offsetLeft - 10;
				x.c = x.a.offsetTop;
				y.forEach(z => {
					if (x.b < 0 || ((!z.live) && x.c == z.offsetTop && x.b == z.offsetLeft)) {
						zh = false;
					}
				})

			})
			if (zh) {
				kk.ss.forEach(x => {
					x.a.style.left = x.b + 'px'
				})
			}
		}

		function you() {
			let y = x.querySelectorAll('div');
			let zh = true;
			kk.ss.forEach(x => {
				x.b = x.a.offsetLeft + 10;
				x.c = x.a.offsetTop;
				y.forEach(z => {
					if (x.b > 350 || ((!z.live) && x.c == z.offsetTop && x.b == z.offsetLeft)) {
						zh = false;
					}
				})
			})
			if (zh) {
				kk.ss.forEach(x => {
					x.a.style.left = x.b + 'px'
				})
			}
		}

		function ting(t) {
			if (t) {
				clearInterval(kk.s)
				ti = !t
			} else {
				kk.run()
				ti = !t
			}
		}

		function suiji() {
			let r = Math.floor(Math.random() * 19);
			return new k(shuzu[r])
		}

		function n() {
			kk = suiji()
			kk.run();
		}
		n();
		x.addEventListener('stop', n, false)

		function zn() {
			kk.zhuann();
		}

		function zs() {
			kk.zhuans();
		}

		function dd(a) {
			if (a) {
				kk.runs();
				m = !a
			} else {
				clearInterval(kk.s)
				kk.run()
				m = !a
			}
		}
		document.addEventListener('keydown', e => {
			let code = e.code;
			switch (code) {
				case 'ArrowLeft':
					zuo();
					break;
				case 'ArrowRight':
					you();
					break;
				case 'ArrowDown':
					dd(m);
					break;
				case 'ArrowUp':
					ting(ti);
					break;
				case 'KeyA':
					zn();
					break;
				case 'KeyD':
					zs();
					break;
			}
		})
	</script>
</body>
